<template>
	<div>
			<header>
				<h1>浩博智能运营1</h1>
				<div class="showTime"></div>
			</header>
			<section class="mainbox">
				<div class="cloumn">
					<Home3></Home3>
					<Home1></Home1>
					<Home2></Home2>
				</div>
				<div class="cloumn">
					<div class="no">
						<h2>物流运输信息</h2>
					</div>
					<!-- 中间地图模块 -->
					<div class="map">
						<div class="map1"></div>
						<div class="map2"></div>
						<div class="map3"></div>
						<chainMap></chainMap>
					</div>
					<div class="no">
						<h2>用户统计</h2>
					</div>
					<Dynamic></Dynamic>
				</div>
				<div class="cloumn">
					<Home4></Home4>
					<!-- <div class="panel bar2">
						<h2>技能掌握</h2>
						<div class="chart">图表</div>
						<div class="panel-footer"></div>
					</div> -->
					<Home5></Home5>
					<!-- <div class="panel line2">
						<h2>播放量</h2>
						<div class="chart">图表</div>
						<div class="panel-footer"></div>
					</div> -->
					<Home6></Home6>
					<!-- <div class="panel pie2">
						<h2>地区分布</h2>
						<div class="chart">图表</div>
						<div class="panel-footer"></div>
					</div> -->
				</div>
			</section>
		</div>
</template>
<script>
import Home1 from './Home1.vue'
import Home2 from './Home2.vue'
import Home3 from './Home3.vue'
import Home4 from './Home4.vue'
import Home5 from './Home5.vue'
import Home6 from './Home6.vue'
import chainMap from './map.vue'
import Dynamic from './Dynamic.vue'
export default {
	components:{
		Home1,
		Home2,
		Home3,
		Home4,
		Home5,
		Home6,
		chainMap,
		Dynamic
	}
}
</script>
<style lang="less">
	*{margin: 0;padding: 0;list-style: none;box-sizing: border-box;}
	body{
		background: url(../plugins/image/bg.jpg) no-repeat;
		background-size: 100% 100%;
		line-height: 1.15;
		height: auto;
	}
	@font-face {
	  font-family: electronicFont;
	  src: url(../plugins/font/DS-DIGIT.TTF);
	}
	header {
	  background: url(../plugins/image/bg.jpg) no-repeat;
	  background-size: 100% 100%;
	  height: 1.25rem;
	  position: relative;
	}
	header h1 {
	  text-align: center;
	  line-height: 1rem;
	  font-size: 0.475rem;
	  color: #fff;
	}
	header .showTime {
	  position: absolute;
	  right: 0.375rem;
	  top: 0;
	  line-height: 0.9375rem;
	  color: rgba(255, 255, 255, 0.7);
	  font-size: 0.25rem;
	}
	.mainbox {
	  width: 100%;
	  margin: 0 auto;
	  padding: 0.125rem 0.125rem 0;
	  display: flex;
	}
	.mainbox .cloumn {
	  flex: 3;
	}
	.mainbox .cloumn:nth-of-type(2) {
	  flex: 5;
	  margin: 0 0.125rem 0.1875rem;
	}
	.mainbox .panel {
	  position: relative;
	  height: 3.875rem;
	  border: 1px solid rgba(25, 186, 139, 0.17);
	  padding: 0 0.1875rem 0.5rem;
	  margin-bottom: 0.1875rem;
	  background: url(../plugins/image/line.png) no-repeat rgba(255, 255, 255, 0.03);
	  background-size: 100% 100%;
	}
	.mainbox .panel::before {
	  position: absolute;
	  top: 0;
	  left: 0;
	  content: '';
	  width: 10px;
	  height: 10px;
	  border-top: 2px solid #02a6b5;
	  border-left: 2px solid #02a6b5;
	}
	.mainbox .panel::after {
	  position: absolute;
	  top: 0;
	  right: 0;
	  content: '';
	  width: 10px;
	  height: 10px;
	  border-top: 2px solid #02a6b5;
	  border-right: 2px solid #02a6b5;
	}
	.mainbox .panel .panel-footer {
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	}
	.mainbox .panel .panel-footer::before {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  content: '';
	  width: 10px;
	  height: 10px;
	  border-bottom: 2px solid #02a6b5;
	  border-left: 2px solid #02a6b5;
	}
	.mainbox .panel .panel-footer::after {
	  position: absolute;
	  bottom: 0;
	  right: 0;
	  content: '';
	  width: 10px;
	  height: 10px;
	  border-bottom: 2px solid #02a6b5;
	  border-right: 2px solid #02a6b5;
	}
	.mainbox .panel h2 {
	  height: 0.6rem;
	  color: #fff;
	  line-height: 0.6rem;
	  text-align: center;
	  font-weight: normal;
	  font-size: 0.25rem;
	}
	.no h2{
		height: 0.4rem;
		color: #fff;
		line-height: 0.4rem;
		font-weight: normal;
		font-size: 0.25rem;
	}
	.mainbox .panel .chart {
	  height: 3rem;
	}
	.no {
	  background: rgba(0,0,0,.2);
	  padding: 0.1875rem;
	}
	.no .no-hd {
	  position: relative;
	  border: 1px solid rgba(25, 186, 139, 0.17);
	}
	.no .no-hd ul {
	  display: flex;
	}
	.no .no-hd ul li {
	  flex: 1;
	  height: 1rem;
	  font-size: 0.875rem;
	  color: #ffeb7b;
	  text-align: center;
	  font-family: 'electronicFont';
	}
	.no .no-hd::before {
	  position: absolute;
	  top: 0;
	  left: 0;
	  content: '';
	  width: 30px;
	  height: 10px;
	  border-top: 2px solid #02a6b5;
	  border-left: 2px solid #02a6b5;
	}
	.no .no-hd::after {
	  position: absolute;
	  bottom: 0;
	  right: 0;
	  content: '';
	  width: 30px;
	  height: 10px;
	  border-bottom: 2px solid #02a6b5;
	  border-right: 2px solid #02a6b5;
	}
	.no .no-bd ul {
	  display: flex;
	}
	.no .no-bd ul li {
	  flex: 1;
	  height: 0.5rem;
	  line-height: 0.5rem;
	  text-align: center;
	  color: rgba(255, 255, 255, 0.7);
	  font-size: 0.225rem;
	}
	.map {
	  height: 6.6rem;
	  position: relative;
	}
	.map .map1 {
	  width: 5.475rem;
	  height: 5.475rem;
	  background: url(../plugins/image/map.png) no-repeat;
	  background-size: 100% 100%;
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -50%);
	  opacity: 0.3;
	  animation: rotate2 10s linear infinite;
	}
	.map .map2 {
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -50%);
	  width: 7.0375rem;
	  height: 7.0375rem;
	  background: url(../plugins/image/lbx.png);
	  background-size: 100% 100%;
	  animation: rotate1 30s linear infinite;
	}
	.map .map3 {
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -50%);
	  width: 6.075rem;
	  height: 6.075rem;
	  background: url(../plugins/image/jt.png);
	  background-size: 100% 100%;
	  animation: rotate2 3s linear infinite;
	  opacity: 0.6;
	}
	.map4{
		width: 100%;
		height:3.875rem;
	}
	.map .chart {
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 6.4rem;
	}
	@keyframes rotate1 {
	  from {
	    transform: translate(-50%, -50%) rotate(0deg);
	  }
	  to {
	    transform: translate(-50%, -50%) rotate(360deg);
	  }
	}
	@keyframes rotate2 {
	  from {
	    transform: translate(-50%, -50%) rotate(0deg);
	  }
	  to {
	    transform: translate(-50%, -50%) rotate(-360deg);
	  }
	}
</style>
